<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <el-form label-width="200px" v-if="dataInfo">
        <div class="tit">
          <h2>基础信息</h2>
          <el-button type="success" plain size="small" icon="fa fa-mail-forward"
                     @click="returnList">返回
          </el-button>
        </div>
        <el-row>
          <el-form-item label="用户ID:">
            <span>{{ dataInfo.userId }}</span>
          </el-form-item>
          <el-form-item label="用户信息修改类型:">
            <span>{{ formatUpdateFlag(dataInfo.updateFlag) }}</span>
          </el-form-item>
          <el-form-item label="用户类型:">
            <span>{{ formatUserType(dataInfo.userType) }}</span>
          </el-form-item>
          <el-form-item label="真实姓名:">
            <span>{{ dataInfo.fullName }}</span>
          </el-form-item>
          <el-form-item label="手机号:">
            <span>{{ dataInfo.phone }}</span>
          </el-form-item>
          <el-form-item label="身份证号:">
            <span>{{ dataInfo.idCard }}</span>
          </el-form-item>
          <!-- <el-form-item label="(原账户信息ID:">
              <span>{{ dataInfo.accountInfoId }}</span>
          </el-form-item> -->
          <!-- <el-form-item label="原账户信息:">
              <span>{{dataInfo.originAccountJson }}</span>
          </el-form-item>
          <el-form-item label="原银行卡信息:">
              <span>{{ dataInfo.originBankJson }}</span>
          </el-form-item>
          <el-form-item label="新账户信息:">
              <span>{{ dataInfo.updateAccountJson }}</span>
          </el-form-item>
          <el-form-item label="新银行卡信息:">
              <span>{{ dataInfo.updateBankJson }}</span>
          </el-form-item> -->
          <el-form-item label="审核状态:">
            <el-tag size="mini" effect="dark" :type="formatCheckStates(dataInfo.checkState)">
              {{ formatCheckState(dataInfo.checkState) }}
            </el-tag>
          </el-form-item>
          <el-form-item label="审核失败的原因:">
            <span>{{ dataInfo.checkReason }}</span>
          </el-form-item>
          <el-form-item label="审核人:">
            <span>{{ dataInfo.checkUserName }}</span>
          </el-form-item>
          <el-form-item label="审核时间:">
            <span>{{ dataInfo.checkDate }}</span>
          </el-form-item>
          <el-form-item label="创建时间:">
            <span>{{ dataInfo.createDate }}</span>
          </el-form-item>
        </el-row>

        <div class="tit" v-if="accountInfoParam">
          <h2>用户实名认证信息</h2>
        </div>
        <el-row v-if="accountInfoParam">
          <el-form-item label="真实姓名:">
            <span>{{ accountInfoParam.fullName }}</span>
          </el-form-item>
          <el-form-item label="手机号:">
            <span>{{ accountInfoParam.phone }}</span>
          </el-form-item>
          <el-form-item label="身份证号:">
            <span>{{ accountInfoParam.idCard }}</span>
          </el-form-item>
          <el-form-item label="身份证正面照:">
            <el-image style="width: 150px;" title="点击可预览" v-if="accountInfoParam.idCardFront"
                      :src="accountInfoParam.idCardFront" alt=""
                      :preview-src-list="[accountInfoParam.idCardFront]"></el-image>
            <span v-else>未上传</span>
          </el-form-item>
          <el-form-item label="身份证反面照:">
            <el-image style="width: 150px;" title="点击可预览" v-if="accountInfoParam.idCardBack"
                      :src="accountInfoParam.idCardBack" alt=""
                      :preview-src-list="[accountInfoParam.idCardBack]"></el-image>
            <span v-else>未上传</span>
          </el-form-item>
        </el-row>

        <div class="tit" v-if="updateAccountJson">
          <h2>账户信息</h2>
        </div>
        <el-row v-if="updateAccountJson">
          <!-- <el-form-item label="用户类型:">
              <span>{{ formatUserType(updateAccountJson.userType) }}</span>
          </el-form-item> -->
          <el-form-item label="提现方式:">
            <span>{{ updateAccountJson.cashType == 1 ? '自动提现' : '手动提现' }}</span>
          </el-form-item>
          <el-form-item label="真实姓名:">
            <span>{{ updateAccountJson.fullName }}</span>
          </el-form-item>
          <el-form-item label="手机号:">
            <span>{{ updateAccountJson.phone }}</span>
          </el-form-item>

          <template v-if="updateAccountJson.userType != 3">
            <el-form-item label="企业商户名称:">
              <span>{{ updateAccountJson.businessName }}</span>
            </el-form-item>
            <el-form-item label="企业联系人:">
              <span>{{ updateAccountJson.linkName }}</span>
            </el-form-item>
            <el-form-item label="企业联系电话:">
              <span>{{ updateAccountJson.linkPhone }}</span>
            </el-form-item>
            <el-form-item label="营业执照:">
              <el-image style="width: 150px;" title="点击可预览" v-if="updateAccountJson.businessLicense"
                        :src="updateAccountJson.businessLicense" alt=""
                        :preview-src-list="[updateAccountJson.businessLicense]"></el-image>
            </el-form-item>
          </template>

          <el-form-item label="身份证号:">
            <span>{{ updateAccountJson.idCard }}</span>
          </el-form-item>
          <el-form-item label="身份证正面照:">
            <el-image style="width: 150px;" title="点击可预览" v-if="updateAccountJson.idCardFront"
                      :src="updateAccountJson.idCardFront" alt=""
                      :preview-src-list="[updateAccountJson.idCardFront]"></el-image>
            <span v-else>未上传</span>
          </el-form-item>
          <el-form-item label="身份证反面照:">
            <el-image style="width: 150px;" title="点击可预览" v-if="updateAccountJson.idCardBack"
                      :src="updateAccountJson.idCardBack" alt=""
                      :preview-src-list="[updateAccountJson.idCardBack]"></el-image>
            <span v-else>未上传</span>
          </el-form-item>
          <el-form-item label="银行卡号:">
            <span>{{ updateAccountJson.cardNo }}</span>
          </el-form-item>
          <el-form-item label="持卡人姓名:">
            <span>{{ updateAccountJson.cardName }}</span>
          </el-form-item>
          <el-form-item label="银行卡类型:">
            <span>{{ updateAccountJson.cardType == 1 ? "公有账户" : "私有法人" }}</span>
          </el-form-item>
          <el-form-item label="银行名称:">
            <span>{{ updateAccountJson.bankName }}</span>
          </el-form-item>
          <el-form-item label="银行编号:">
            <span>{{ updateAccountJson.bankCode }}</span>
          </el-form-item>
          <el-form-item label="支行名称:">
            <span>{{ updateAccountJson.branchName }}</span>
          </el-form-item>
          <el-form-item label="支行编号:">
            <span>{{ updateAccountJson.branchCode }}</span>
          </el-form-item>
          <el-form-item label="银行卡正面照:">
            <el-image style="width: 150px;" title="点击可预览" v-if="updateAccountJson.bankCardFront"
                      :src="updateAccountJson.bankCardFront" alt=""
                      :preview-src-list="[updateAccountJson.bankCardFront]"></el-image>
            <span v-else>未上传</span>
          </el-form-item>
          <el-form-item label="银行卡反面照:">
            <el-image style="width: 150px;" title="点击可预览" v-if="updateAccountJson.bankCardBack"
                      :src="updateAccountJson.bankCardBack" alt=""
                      :preview-src-list="[updateAccountJson.bankCardBack]"></el-image>
            <span v-else>未上传</span>
          </el-form-item>
        </el-row>

        <div class="tit" v-if="originAccountJson">
          <h2>原账户信息</h2>
        </div>
        <el-row v-if="originAccountJson">
          <el-form-item label="用户类型:">
            <span>{{ formatUserType(originAccountJson.userType) }}</span>
          </el-form-item>
          <el-form-item label="提现方式:">
            <span>{{ originAccountJson.cashType == 1 ? '自动提现' : '手动提现' }}</span>
          </el-form-item>
          <el-form-item label="真实姓名:">
            <span>{{ originAccountJson.fullName }}</span>
          </el-form-item>
          <el-form-item label="手机号:">
            <span>{{ originAccountJson.phone }}</span>
          </el-form-item>
          <template v-if="originAccountJson.userType != 3">
            <el-form-item label="企业商户名称:">
              <span>{{ originAccountJson.businessName }}</span>
            </el-form-item>
            <el-form-item label="企业联系人:">
              <span>{{ originAccountJson.linkName }}</span>
            </el-form-item>
            <el-form-item label="企业联系电话:">
              <span>{{ originAccountJson.linkPhone }}</span>
            </el-form-item>
            <el-form-item label="营业执照:">
              <el-image style="width: 150px;" title="点击可预览" v-if="originAccountJson.businessLicense"
                        :src="originAccountJson.businessLicense" alt=""
                        :preview-src-list="[originAccountJson.businessLicense]"></el-image>
            </el-form-item>
          </template>
          <el-form-item label="身份证号:">
            <span>{{ originAccountJson.idCard }}</span>
          </el-form-item>

          <el-form-item label="身份证正面照:">
            <el-image style="width: 150px;" title="点击可预览" v-if="originAccountJson.idCardFront"
                      :src="originAccountJson.idCardFront" alt=""
                      :preview-src-list="[originAccountJson.idCardFront]"></el-image>
            <span v-else>未上传</span>
          </el-form-item>
          <el-form-item label="银行卡号:">
            <span>{{ originAccountJson.cardNo }}</span>
          </el-form-item>
          <el-form-item label="持卡人姓名:">
            <span>{{ updateAccountJson.cardName }}</span>
          </el-form-item>
          <el-form-item label="银行卡类型:">
            <span>{{ originAccountJson.cardType == 1 ? "公有账户" : "私有法人" }}</span>
          </el-form-item>
          <el-form-item label="银行名称:">
            <span>{{ originAccountJson.bankName }}</span>
          </el-form-item>
          <el-form-item label="银行编号:">
            <span>{{ originAccountJson.bankCode }}</span>
          </el-form-item>
          <el-form-item label="支行名称:">
            <span>{{ originAccountJson.branchName }}</span>
          </el-form-item>
          <el-form-item label="支行编号:">
            <span>{{ originAccountJson.branchCode }}</span>
          </el-form-item>
          <el-form-item label="身份证反面照:">
            <el-image style="width: 150px;" title="点击可预览" v-if="originAccountJson.idCardBack"
                      :src="originAccountJson.idCardBack" alt=""
                      :preview-src-list="[originAccountJson.idCardBack]"></el-image>
            <span v-else>未上传</span>
          </el-form-item>
          <el-form-item label="银行卡正面照:">
            <el-image style="width: 150px;" title="点击可预览" v-if="originAccountJson.bankCardFront"
                      :src="updateAccountJson.bankCardFront" alt=""
                      :preview-src-list="[updateAccountJson.bankCardFront]"></el-image>
            <span v-else>未上传</span>
          </el-form-item>
          <el-form-item label="银行卡反面照:">
            <el-image style="width: 150px;" title="点击可预览" v-if="originAccountJson.bankCardBack"
                      :src="updateAccountJson.bankCardBack" alt=""
                      :preview-src-list="[updateAccountJson.bankCardBack]"></el-image>
            <span v-else>未上传</span>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import YmAccountCheckApi from '@/api/account/ymAccountCheck';

export default {
  data() {
    return {
      dataInfo: {},
      accountInfoParam:{},
      originAccountJson: null,
      originBankJson: null,
      updateAccountJson: null,
      updateBankJson: null,
    };
  },
  computed: {},
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      YmAccountCheckApi.getAccountCheckInfo({id: this.$route.query.id}).then(res => {
        let {originAccountJson, updateAccountJson} = res.data
        this.originAccountJson = originAccountJson ? JSON.parse(originAccountJson) : null
        this.updateAccountJson = updateAccountJson ? JSON.parse(updateAccountJson) : null
        //console.log(this.originAccountJson, this.updateAccountJson)
        this.dataInfo = res.data
        this.accountInfoParam = res.data.accountInfo;
      })
    },
    formatUserType(cellValue) {
      if (cellValue === 1) {
        return '企业商户'
      } else if (cellValue === 2) {
        return '个体工商户'
      } else if (cellValue === 3) {
        return '个人'
      }
    },
    formatUpdateFlag(cellValue) {
      if (cellValue === 1) {
        return '新增账户信息'
      } else if (cellValue === 2) {
        return '修改账户信息'
      } else if (cellValue === 3) {
        return '更换结算卡'
      }
    },
    formatCheckState(cellValue) {
      if (cellValue === 0) {
        return '待审核'
      } else if (cellValue === 1) {
        return '审核成功'
      } else if (cellValue === 2) {
        return '审核失败'
      }
    },
    formatCheckStates(cellValue) {
      if (cellValue === 0) {
        return ''
      } else if (cellValue === 1) {
        return 'success'
      } else if (cellValue === 2) {
        return 'danger'
      }
    },
    returnList() {
      this.$store.dispatch('delView', this.$route);
      this.$router.back()
    }
  },

}

</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>

<style lang="scss" scoped>
.img-wrapper {
  width: 100%;
  overflow: hidden;
  border-radius: 3px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;

  .el-image {
    width: 100%;

    &::v-deep img {
      height: auto
    }
  }
}
</style>
